<template>
  <div class="result-container">
    <!-- 项目评审结果列表 -->
    <el-card class="project-list">
      <h2>项目评审结果</h2>
      <el-table :data="projects" style="width: 100%">
        <el-table-column prop="projectname" label="项目名称"></el-table-column>
        <el-table-column prop="username" label="提交人"></el-table-column>
        <el-table-column prop="innovation" label="创新性"></el-table-column>
        <el-table-column prop="feasibility" label="可行性"></el-table-column>
        <el-table-column prop="marketpotential" label="市场可行性"></el-table-column>
        <el-table-column prop="comments" label="评价"></el-table-column>
      </el-table>
      <el-pagination
          background
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[9]"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handlePageChange"
      />
    </el-card>

    <!-- 评审结果详情对话框 -->
    <el-dialog :visible.sync="showResultDialog" title="评审结果详情">
      <div v-if="selectedProject" class="result-detail">
        <h3>{{ selectedProject.projectName }}</h3>

        <el-divider></el-divider>

        <!-- 评分展示 -->
        <div class="score-section">
          <div class="score-item">
            <label>创新性评分：</label>
            <el-rate
                v-model="reviewResult.innovation"
                :max="10"
                disabled
                show-score
                score-template="{value} 分">
            </el-rate>
          </div>

          <div class="score-item">
            <label>可行性评分：</label>
            <el-rate
                v-model="reviewResult.feasibility"
                :max="10"
                disabled
                show-score
                score-template="{value} 分">
            </el-rate>
          </div>

          <div class="score-item">
            <label>市场潜力评分：</label>
            <el-rate
                v-model="reviewResult.marketPotential"
                :max="10"
                disabled
                show-score
                score-template="{value} 分">
            </el-rate>
          </div>
        </div>

        <!-- 评语展示 -->
        <div class="comment-section">
          <h4>专家评语：</h4>
          <el-input
              type="textarea"
              :value="reviewResult.comments"
              :rows="6"
              readonly
              class="comment-box">
          </el-input>
        </div>

        <div class="dialog-footer">
          <el-button type="success" @click="confirmReceipt">确认接收</el-button>
          <el-button @click="showResultDialog = false">关闭</el-button>
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageNum: 1,     // 当前页码
      pageSize: 9,    // 每页显示数量
      total: 0,        // 总数据量
      projects: [],
      showResultDialog: false,
      selectedProject: null,
      reviewResult: {
        innovation: 0,
        feasibility: 0,
        marketPotential: 0,
        comments: ''
      }
    }
  },
  created() {
    this.fetchProjects();
  },
  methods: {
    // 获取项目列表
    async fetchProjects() {
      try {
        const res = await this.$request.get('/project/reviewResult', {
          params: {  // 添加分页参数
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        });

        this.projects = res.data?.records || [];
        this.total = res.data?.total || 0;
      } catch (error) {
        this.$message.error('获取项目失败');
      }
    },
    handlePageChange(val) {
      this.pageNum = val;
      this.fetchProjects();
    },
    // 查看详情
    handleViewDetail(project) {
      this.selectedProject = project;
      this.reviewResult = {
        innovation: project.scores?.innovation || 0,
        feasibility: project.scores?.feasibility || 0,
        marketPotential: project.scores?.marketPotential || 0,
        comments: project.comments || '暂无评语'
      };
      this.showResultDialog = true;
    },

    // 状态样式
    statusStyle(status) {
      return {
        '已评审': 'success',
        '待评审': 'info',
        '已确认': 'warning'
      }[status] || 'info';
    },

    // 确认接收结果
    async confirmReceipt() {
      try {
        await this.$request.post('/student/confirm', {
          projectId: this.selectedProject.id
        });

        const index = this.projects.findIndex(p =>
            p.id === this.selectedProject.id
        );
        this.projects[index].status = '已确认';

        this.showResultDialog = false;
        this.$message.success('结果确认成功');
      } catch (error) {
        this.$message.error('确认失败');
      }
    }
  }
}
</script>

<style scoped>
.result-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.project-list {
  margin-bottom: 20px;
}

.score-section {
  margin: 20px 0;
}

.score-item {
  margin: 15px 0;
  display: flex;
  align-items: center;
}

.score-item label {
  width: 120px;
  font-weight: bold;
}

.comment-section {
  margin-top: 25px;
}

.comment-box {
  font-size: 14px;
}

.dialog-footer {
  margin-top: 25px;
  text-align: right;
}

.result-detail h3 {
  color: #409EFF;
  margin-bottom: 15px;
}
</style>